<!-- 定制开发请联系客服微信：csmszf -->
<template>
	<view>
		<view class="dating-find-container">
			<view class="dating-find-tabs">
				<u-tabs
				class="u-flex-middle"
				lineColor="#FFC600"
				:activeStyle="{
					color: '#FFC600',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#ffff',
					transform: 'scale(1)'
				}"
				lineWidth="30"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				:list="tabList" @click="tabClick"></u-tabs>
			</view>
			<view class="dating-find-wrap">
				<!-- 空白页 -->
				<u-empty v-if="isEmpty === true && postDataList.length === 0" :text="emptyText" mode="list"></u-empty>
				<dating-dynamic @refreshData="getPostPage"  :dynamicList="postDataList"></dating-dynamic>
				<u-loadmore
						:status="loadStatus" 
						:loading-text="loadingText" 
						:loadmore-text="loadmoreText" 
						:nomore-text="nomoreText" 
						loadingIcon="semicircle"
						@loadmore="getPostPage"
					/>
			</view>
		</view>
		<view class="dating-find-post" @tap="$Router.push({ path: '/pages/common/post/release'})">
			<view class="iconfont iconfont-post icon-img"></view>
		</view>
	</view>
</template>

<script>
	import {postPage,dictList} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js'
	export default {
		data() {
			return {
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				postDataList: [],
				loadStatus: 'loadmore',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				emptyText:'',
				categoryerrorText:'',
				params: {
					categoryId:1,
					pageNo: 1,
					type: 1, //我发布的
					pageSize: 10,
					locale:'',
				},
				tabList: [
					{name:'推荐'},
					{name:'更新'},
					{name:'关注'}
				]
			};
		},
		onLoad(){
			this.getPostCategoryDict();
			this.getPostPage()	
		},
		onShow(){
		  this.refresh();
		  this.params.locale = this.$i18n.locale;
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			  this.getPostPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.postDataList = []
			this.getPostPage()
		},
		methods: {
			refreshData(){
				
			},
			getPostCategoryDict(){

			},
			refresh(){
				this.isLogin = jwt.getLogin();
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				this.categoryerrorText = this.$t('release.categoryerror.text');
			},
			getPostPage(){
				debugger
				if(jwt.getLogin()){
					this.loadStatus = 'loading';
					postPage(this.params).then((res)=>{
						debugger
						uni.stopPullDownRefresh()
						if(res.code === 0){
						  if(res.data.list.length === 0){
							this.isEmpty = true;
							this.loadStatus = 'nomore'
							this.loadMoreFlag = false;
						  }else if (res.data.list.length < 10) {
							this.loadStatus = 'nomore'
							this.loadMoreFlag = false;
						  } else {
							this.params.pageNo++;
							this.loadStatus = 'loading'
							this.loadMoreFlag = true;
						  }
						  if (this.params.pageNo > 1) {
							this.postDataList = this.postDataList.concat(res.data.list);
						  } else {
							this.postDataList = res.data.list;
						  }
						}
					  }).catch(error=>{
						console.error(error)
					  })
				}else{
					this.isEmpty = true;
				}
			},
			tabClick(item) {
				console.log('item', item);
				this.params.pageNo = 1;
				this.params.categoryId = item.id;
				this.$nextTick(() => {
					this.getPostPage();
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	position: relative;
}
/deep/ .dating-find-container{
	margin-bottom: 20px;
}
.dating-find-container{
	display: flex;
	flex-direction: column;
	.dating-find-tabs{
		background-color: $dating-color-primary;
		z-index: 100;
		position: fixed;
		width: 100%;
	}
	.dating-find-wrap{
		margin-top: 80rpx;
	}
}
.dating-find-post{
	position: fixed;
	right: 10rpx;
	bottom: 100rpx;
	//在position:fixed/absolute内加入 
	-webkit-transform: translateZ(0);
	//假如有遮罩情况则在内容区域，加入 ：
	margin-bottom:30px;//margin-top:30px;
	//抖动情况，则在内容区域，加入 ：
	overflow-y: auto;
	.icon-img{
		width: 32px;
		height: 32px;
	}
}
</style>
